<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="loginName" label="登录名" />
    <el-table-column prop="status" label="状态">
      <template #default="{ row }">
        <el-tag :type="row.status === '启用' ? 'success' : 'danger'">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button size="small" @click="toggleStatus(row)">
          {{ row.status === '启用' ? '禁用' : '启用' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import axios from '@/api/axios'

const props = defineProps({ role: String })
const tableData = ref([])

const load = async () => {
  const endpoint = `/admin/${props.role}/page`
  const res = await axios.get(endpoint, { params: { current: 1, size: 50 } })
  tableData.value = res.data.records
}

const toggleStatus = async (row) => {
  const newStatus = row.status === '启用' ? '停用' : '启用'
  await axios.put(`/admin/${props.role}/status`, { id: row.id, status: newStatus })
  load()
}

onMounted(load)
watch(() => props.role, load)
</script>